<template>
    <view>
        <cu-custom bgColor="bg-gradual-green" :isBack="true">
            <block slot="content">课中督课</block>
            <block slot="backText">返回</block>
        </cu-custom>
        <view :class="{'uni-card--shadow': isShadow === true || isShadow === 'true' }"
        class="uni-card" @click="onClick">
            <!-- 标题 -->
            <view v-if="userCamera" class="uni-card__footer">
                <slot name="footer">
                    <text class="uni-card__footer-text">{{ userCamera }}</text>
                </slot>
            </view>
            <view class="uni-card__thumbnailimage">
                <view class="uni-card__thumbnailimage-box">
                    <image class="uni-card__thumbnailimage-image" :src="cameraSrc"/>
                </view>
            </view>
        </view>
        <view :class="{'uni-card--shadow': isShadow === true || isShadow === 'true' }"
        class="uni-card" @click="onClick">
            <!-- 标题 -->
            <view v-if="userScreen" class="uni-card__footer">
                <slot name="footer">
                    <text class="uni-card__footer-text">{{ userScreen }}</text>
                </slot>
            </view>
            <view class="uni-card__thumbnailimage">
                <view class="uni-card__thumbnailimage-box">
                    <image class="uni-card__thumbnailimage-image" :src="screenSrc" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {PHOTO_URL} from '@/API.js';
export default {
    name: 'UniCard',
    props: {
        userCamera: {
            type: String,
            default: '用户摄像头'
        },
        userScreen: {
            type: String,
            default: '当前屏幕'
        }, // 标题
        isShadow: {
            // 是否开启阴影
            type: Boolean,
            default: false
        }
    },
    onReady() {
        let self = this;
        var token = getApp().globalData.user.token;
        // 当前摄像头
        uni.request({
            url: PHOTO_URL.camera.url,
            method: PHOTO_URL.camera.method,
            header: {'http-token': token},
            success: (res) => {
                if(res.data && res.data.user_photo)
                    self.cameraSrc = res.data.user_photo;
                else
                    self.cameraSrc = this.defaultImageSrc;
                //console.log('camera on success');
            },
            fail: ()  => {
                //console.log('heres the fail ');
                uni.showToast({
                    title: '当前用户未开启摄像头',
                    icon: 'none'
                });
            },
            complete: () => {
                //console.log(res.statusCode);
            }
        });

        // 当前截屏
        uni.request({
            url: PHOTO_URL.screen.url,
            method: PHOTO_URL.screen.method,
            header: {'http-token': token},
            success: (res) => {
                if(res.data && res.data.current_screen)
                    self.screenSrc = res.data.current_screen;
                else
                    self.screenSrc = this.defaultImageSrc;
                //console.log('screen on success');
            },
            fail: ()  => {
                //console.log('heres the fail ');
                uni.showToast({
                    title: '当前不在直播或用户未打开课程页',
                    icon: 'none'
                });
            },
            complete: () => {
                //console.log(res.statusCode);
            }
        });
    },
    data() {
        return {
            cameraSrc: '',
            screenSrc: '',
            defaultImageSrc: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg'
        };
    },
    methods: {
        onClick() {
            this.$emit('click');
        }
    }
};
</script>

<style lang="scss" scoped>
    .uni-card {
        /* #ifndef APP-NVUE */
        display: flex;
        flex: 1;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        /* #endif */
        margin: 20px;
        background-color: $uni-bg-color;
        position: relative;
        flex-direction: column;
        border-color: $uni-border-color;
        border-style: solid;
        border-width: 1px;
        border-radius: 8px;
        overflow: hidden;

    }

    .uni-card__thumbnailimage {
        position: relative;
        flex-direction: column;
        justify-content: center;
        height: 150px;
        overflow: hidden;
    }

    .uni-card__thumbnailimage-box {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: row;
        overflow: hidden;
    }

    .uni-card__thumbnailimage-image {
        flex: 1;
    }

    .uni-card__thumbnailimage-title {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: row;
        padding: $uni-spacing-col-base $uni-spacing-col-lg;
        background-color: $uni-bg-color-mask;
    }

    .uni-card__content {
        color: $uni-text-color;
    }

    .uni-card__footer {
        justify-content: space-between;
        padding: 10px;
        border-top-color: $uni-border-color;
        border-top-style: solid;
        border-top-width: 1px;
    }

    .uni-card__footer-text {
        font-size: 40rpx;
        font-weight: bold;
        color: #333333;
        position: relative;
        margin-left: 170rpx;
    }

    .uni-card--shadow {
        border-color: $uni-border-color;
        border-style: solid;
        border-width: 1px;
        /* #ifndef APP-NVUE */
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
        /* #endif */
    }
</style>
